<!-- 该页面是从专科的页面跳转过来的医生列表页面 -->
<template>
	<view>
		<view class="weui-navbar">
			<block v-for="(item, index) in tabs" :key='index'>
				<view :id="index" class="weui-navbar__item" @tap="tabClick" :class="activeIndex == index ? 'onclickitem' : ''">
					<view>{{ item.name }}</view>
				</view>
			</block>
		</view>
		<view v-if="activeIndex==0">
			<view class="time-list" v-if="chooseDateValue==''">
				<view :class="dateclass[i1]" v-for="(e1,i1) in dateList" :key="e1" @click="chooseDate(e1,i1)">
					<image class="icon" :src="'/static/jhimage/cal.png'"></image>
				{{dateToday==e1?'今':checkXIngqi(e1)}}
				<span class="yuyue-date-button">{{e1}}</span>
				<span class="yuyue-button">选定日期</span>
				</view>
			</view>
			<span class="choose-item-info" v-else>
				已选日期：{{chooseDateValue}}
				（{{dateToday==chooseDateValue?'今':checkXIngqi(chooseDateValue)}}）
			</span>
			<view class="doctor-outbox" v-for="(item1, index1) in doctorDateList"
			style="background-color: #fffae8;"
			:key="item1.id" @click="mashangyuyue(item1.id,chooseDateValue)">
				<image class="doctor-icon" :src="item1.photo"></image>
				<view class="doctor-info" >
					<text class="doctor-name text-position">{{item1.name}}</text>
					<text class="gray-text text-position">{{keshiname}}</text>
					<text class="gray-text text-position">{{item1.shanchang.substring(0,15)}}</text>
				</view>
			</view>
		</view>
		<view v-if="activeIndex==1">
			<view v-if="chooseYishengValue==''">
				<view class="doctor-outbox" v-for="(item, index) in doctorList"
				style="background-color: #fffae8;"
				:key="item.id" @click="mashangyuyue(item.id,'0',index)">
					<image class="doctor-icon" :src="item.photo"></image>
					<view class="doctor-info" >
						<text class="doctor-name text-position">{{item.name}}</text>
						<text class="gray-text text-position">{{keshiname}}</text>
						<text class="gray-text text-position">{{item.shanchang.substring(0,15)}}</text>
					</view>
				</view>
			</view>
			<view class="doctor-outbox" v-if="chooseYishengValue!=''"
			style="background-color: #fffae8;">
				<image class="doctor-icon" :src="chooseyisheng.photo"></image>
				<view class="doctor-info" >
					<text class="doctor-name text-position">{{chooseyisheng.name}}</text>
					<text class="gray-text text-position">{{keshiname}}</text>
					<text class="gray-text text-position">{{chooseyisheng.shanchang.substring(0,15)}}</text>
				</view>
			</view>
			<view class="time-list" v-if="chooseYishengValue!=''">
				<view :class="dateclass2[i3]" v-for="(e3,i3) in dateDoctorList" :key="e3" @click="yuyuemashang(chooseyisheng.id,e3)">
					<image class="icon" :src="'/static/jhimage/cal.png'"></image>
				{{dateToday==e3?'今':checkXIngqi(e3)}}
				<span class="yuyue-date-button">{{e3}}</span>
				<span class="yuyue-button">预约</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {error} from '@/common/js/errorTips.js'
	import {
		findyishengBykeshi,
		findKeshiByid,
		findavaliablePanban,
		findAYishengBuKeshi,
		findADateList,
		chooseDoctorByDateKeAKeshi,
		getKeshiName,
		findyishengByid,
		findADateListByyIsheng
	} from '@/common/api/jh/doctor.js'
	
	export default {
		// 到达底部时会自动获取新数据
		onReachBottom: function() {
			
		},
		data() {
			return {
				doctorList: [],
				yishengpaibanList: [],
				dateList: [],
				doctorDateList :[],
				dateDoctorList: [],
				loadingText: '',
				page: 1,
				specialId: 0,
				outpatientId: 0,
				iconURL: '/static/appointment/',
				tabs: [{
					name:'按时间',
					image:'/static/jhimage/date.png'
				},
				{
					name:'按医生',
					image:'/static/jhimage/doctor.png'
				}],
				activeIndex: 0,
				dateclass: [],
				dateclass2: [],
				keshi: '',
				keshiname: '',
				chooseDateValue: '',
				dateToday: '',
				chooseYishengValue: '',
				chooseyisheng:{}
				
			}
		},
		onLoad(){
			this.getNow()
			this.chooseDateValue =''
			this.chooseYishengValue =''
			this.getKeshiName()
			this.findADateList()
		},
		methods: {
			tabClick: function(e) {
				// 只有当页面是当月的任何状态和以往的没有失信记录的情况下才修改这个值
				if (e.currentTarget.id == 1) {
					this.chooseYishengValue =''
					this.dateDoctorList = []
					this.findAYishengBuKeshi()
				} else if(e.currentTarget.id == 0) {
					this.chooseDateValue = ''
					this.doctorDateList = []
					this.findADateList()
				}
				this.activeIndex = e.currentTarget.id
			},
			mashangyuyue(doctorid,date,i){
				if(date=='0'){   //have not select date
					this.findyishengByid(doctorid)
					this.findADateListByyIsheng(doctorid);
					this.chooseyisheng = this.doctorList[i]
				}else{
					this.yuyuemashang(doctorid,date)
				}
			},
			findADateList(){
				var keshi = uni.getStorageSync("chooseedKeshi");
				this.keshi = keshi
				findADateList(keshi).then(res => {
					this.dateList = res.data
					if(res.data.length>0){
						var dateclass = []
						for(var i=0;i<this.dateList.length;i++){
							dateclass.push('item-time-list')
						}
						this.dateclass = dateclass
					}else{
						error("暂无医生可选！")
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/yuyue/yuyue',
							})
						},2000)
					}
				}).catch(() => {
					uni.hideLoading()
					error('网络故障!')
				})
			},
			findAYishengBuKeshi(){
				var keshi = uni.getStorageSync("chooseedKeshi");
				findAYishengBuKeshi(keshi).then(res => {
					this.doctorList = res.data
				}).catch(() => {
					uni.hideLoading()
					error('网络故障!')
				})
			},
			chooseDate(date,ii){
				this.dateclass = 'item-time-list2'
				var dateclass = []
				for(var i=0;i<this.dateList.length;i++){
					if(i==ii){
						dateclass.push('item-time-list2')
					}else{
						dateclass.push('item-time-list')
					}
				}
				this.dateclass = dateclass
				this.chooseDoctorByDateKeAKeshi(date)
				this.chooseDateValue = date
			},
			findyishengByid(id){
				findyishengByid(id).then(res => {
					this.chooseYishengValue = res.data.name
					console.log("res.data.name"+res.data.name)
				}).catch(() => {
					error('网络故障!')
				})
			},
			findADateListByyIsheng(id){
				var keshi = uni.getStorageSync("chooseedKeshi");
				findADateListByyIsheng(keshi,id).then(res => {
					this.dateDoctorList = res.data
					var dateclass = []
					for(var i=0;i<this.dateDoctorList.length;i++){
						dateclass.push('item-time-list')
					}
					this.dateclass2 = dateclass
					console.log("date"+res.data)
				}).catch(() => {
					error('网络故障!')
				})
			},
			yuyuemashang(yisheng,shijian){
				if(uni.getStorageSync('isAlreadyLogin')){
					if(yisheng==""||yisheng==undefined||yisheng==null){
						error('请选择医生！')
					}else if(shijian==""||shijian==undefined||shijian==null){
						error('请选择时间！')
					}else{
						var object= {
							yisheng :yisheng,
							date: shijian,
							keshi: this.keshi
						}
						uni.setStorageSync("yuyue1",JSON.stringify(object))
						uni.navigateTo({
							url: '/pages/yuyue/yuyuePaiHao'
						})	
					}
				}else{
					error("请先登录！")
				}
				
			},
			chooseDoctorByDateKeAKeshi(date){
				chooseDoctorByDateKeAKeshi(this.keshi,date).then(res => {
					this.doctorDateList = res.data
				}).catch(() => {
					error('网络故障!')
				})
			},
			getNow(){
				var date = new Date();
				var month = Number(date.getMonth())+1
				console.log((Number(month)<=9)+"===============month<=9")
				var nmonth = ""
				if((Number(month)<=9)){
					nmonth = "0"+String(month)
				}else{
					nmonth = String(month)
				}
				var ndate = ""
				if((Number(date.getDate())<=9)){
					ndate = "0"+String(date.getDate())
				}else{
					ndate = String(date.getDate())
				}
				var ff = nmonth+"/"+ndate+"/"+date.getFullYear()
				console.log(ff)
				this.dateToday = ff
			},
			checkXIngqi(e){
				var date = new Date(e);
				var week = date.getDay();
				var str = ""; 
				if (week == 0) { 
				        str = "日"; 
				} else if (week == 1) { 
				        str = "一"; 
				} else if (week == 2) { 
				        str = "二"; 
				} else if (week == 3) { 
				        str = "三"; 
				} else if (week == 4) { 
				        str = "四"; 
				} else if (week == 5) { 
				        str = "五"; 
				} else if (week == 6) { 
				        str = "六"; 
				} 
				return str;
			},
		/* 	findavaliablePanban(){
				var keshi = uni.getStorageSync("chooseedKeshi");
				findavaliablePanban(keshi).then(res => {
					this.yishengpaibanList = res.data
				}).catch(() => {
					uni.hideLoading()
					error('网络故障')
				})
			}, */
			getKeshiName(){
				var keshi = uni.getStorageSync("chooseedKeshi");
				console.log("keshikeshikeshi"+keshi)
				getKeshiName(keshi).then(res => {
					console.log(res.data)
					this.keshiname = res.data
				}).catch(() => {
					uni.hideLoading()
					error('网络故障')
				})
			},
			getOdoclist(){
				var keshi = uni.getStorageSync("chooseedKeshi");
				if(keshi!=''){
					findyishengBykeshi(keshi).then(res => {
						var redata = []
						if(res.data.length>0){
							res.data.forEach(function(e,i){
								this.doctorList = res.data
							})
						}
					}).catch(() => {
						uni.hideLoading()
						error('网络故障')
					})
				}
			},
			/* // 跳转到医生简介页面
			toDoctorBrief:function(doctorInfo) {
				let obj = {
					doctorInfo: doctorInfo
				}
				uni.setStorageSync('doctorInfo', JSON.stringify(obj))
				uni.navigateTo({
					url: '/pagesB/pages/appointPages/doctorAppointDetail/doctorAppointDetail?isTreatmentTime=' + 2
				})
			}, */
		},
	}
</script>

<style lang="scss">
	@import '@/common/scss/common.scss';
	@import '@/common/scss/doctor.scss';
	.text-position{
		width: 90%;
		height: 50%;
		display: flex;
		align-items: center;
	}
	.text-position2{
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
	}
	.time-list{
		margin: 20px;
		color: #000000;
	}
	.icon {
		@include icon-size(40rpx, 40rpx);
		margin-right: 50rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}
	.item-time-list{
		border:1rpx solid #f0f0f0;
		margin: 15rpx;
		border-radius: 10rpx;
		font-size: 18px;
	}
	.item-time-list2{
		border:1rpx solid #f0f0f0;
		margin: 15rpx;
		border-radius: 10rpx;
		font-size: 18px;
		color: #00aaff;
	}
	.onclickitem{
		color: #00aaff;
	}
	.gray-text{
		@include font-style(12px, 500, $gray-color);
	}
	.doctor-name{
		@include font-style(18px, bold, #000000);
	}
	.loading {
		text-align: center;
		line-height: 80px;
		font-family: '宋体';
		color: #a6a6a6;
	}
	// 关于顶部导航栏的
	.weui-tab__content {
		// padding-top: 60px;
		text-align: center;
	}
	.yuyue-date-button{
		margin-left: 18%;
	}
	.yuyue-button{
		color:#00aaff;
		font-size: 13px;
		float: right;
		margin-right: 2%;
		font-family: '宋体';
		margin-top: 12px;
	}
	.choose-item-info{
		color:#00aaff;
		font-size: 15px;
		margin: 20px;
	}
</style>
